<template>
    <div class="shop-type">
        <div class="header">
            <van-search
                    v-model="value"
                    shape="round"
                    background="#4fc08d"
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
            />
        </div>
        <div class="body">
            <van-tree-select @click-nav="handleClickNav" :items="items" :main-active-index.sync="active">
                <template #content>
                    <!--{{activeData}}-->
                    <van-image
                            v-for="i in 100" :key="i"
                            src="https://img.yzcdn.cn/vant/apple-1.jpg"
                    />
                    <!--<van-image-->
                    <!--v-if="active === 1"-->
                    <!--src="https://img.yzcdn.cn/vant/apple-2.jpg"-->
                    <!--/>-->
                </template>
            </van-tree-select>
        </div>

    </div>
</template>


<script>
    export default {
        name: 'Home',
        data() {
            return {
                value: '',
                active: 0,
                activeData: [],
                items:
                    [
                        {
                            // 导航名称
                            text: '成都',
                            // 导航名称右上角徽标，2.5.6 版本开始支持
                            badge: 3,
                            // 是否在导航名称右上角显示小红点
                            dot: true,
                            // 导航节点额外类名
                            className: 'my-class',
                            // 该导航下所有的可选项
                            children: [
                                {
                                    // 名称
                                    text: '温州',
                                    // id，作为匹配选中状态的标识符
                                    id: 1,
                                    // 禁用选项
                                    disabled: true,
                                },
                                {
                                    text: '杭州',
                                    id: 2,
                                },
                            ],
                        }, {
                        // 导航名称
                        text: '成都',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '成都',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '成都',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '成都',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '成都',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    },
                        {
                            // 导航名称
                            text: '成都',
                            // 导航名称右上角徽标，2.5.6 版本开始支持
                            badge: 3,
                            // 是否在导航名称右上角显示小红点
                            dot: true,
                            // 导航节点额外类名
                            className: 'my-class',
                            // 该导航下所有的可选项
                            children: [
                                {
                                    // 名称
                                    text: '温州',
                                    // id，作为匹配选中状态的标识符
                                    id: 1,
                                    // 禁用选项
                                    disabled: true,
                                },
                                {
                                    text: '杭州',
                                    id: 2,
                                },
                            ],
                        },
                        {
                            // 导航名称
                            text: '成都',
                            // 导航名称右上角徽标，2.5.6 版本开始支持
                            badge: 3,
                            // 是否在导航名称右上角显示小红点
                            dot: true,
                            // 导航节点额外类名
                            className: 'my-class',
                            // 该导航下所有的可选项
                            children: [
                                {
                                    // 名称
                                    text: '温州',
                                    // id，作为匹配选中状态的标识符
                                    id: 1,
                                    // 禁用选项
                                    disabled: true,
                                },
                                {
                                    text: '杭州',
                                    id: 2,
                                },
                            ],
                        },
                        {
                            // 导航名称
                            text: '成都',
                            // 导航名称右上角徽标，2.5.6 版本开始支持
                            badge: 3,
                            // 是否在导航名称右上角显示小红点
                            dot: true,
                            // 导航节点额外类名
                            className: 'my-class',
                            // 该导航下所有的可选项
                            children: [
                                {
                                    // 名称
                                    text: '温州',
                                    // id，作为匹配选中状态的标识符
                                    id: 1,
                                    // 禁用选项
                                    disabled: true,
                                },
                                {
                                    text: '杭州',
                                    id: 2,
                                },
                            ],
                        },
                        {
                            // 导航名称
                            text: '成都',
                            // 导航名称右上角徽标，2.5.6 版本开始支持
                            badge: 3,
                            // 是否在导航名称右上角显示小红点
                            dot: true,
                            // 导航节点额外类名
                            className: 'my-class',
                            // 该导航下所有的可选项
                            children: [
                                {
                                    // 名称
                                    text: '温州',
                                    // id，作为匹配选中状态的标识符
                                    id: 1,
                                    // 禁用选项
                                    disabled: true,
                                },
                                {
                                    text: '杭州',
                                    id: 2,
                                },
                            ],
                        },
                        {
                            // 导航名称
                            text: '昆明',
                            // 导航名称右上角徽标，2.5.6 版本开始支持
                            badge: 3,
                            // 是否在导航名称右上角显示小红点
                            dot: true,
                            // 导航节点额外类名
                            className: 'my-class',
                            // 该导航下所有的可选项
                            children: [
                                {
                                    // 名称
                                    text: '温州',
                                    // id，作为匹配选中状态的标识符
                                    id: 1,
                                    // 禁用选项
                                    disabled: true,
                                },
                                {
                                    text: '杭州',
                                    id: 2,
                                },
                            ],
                        }, {
                        // 导航名称
                        text: '北京',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '厦门',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '福建',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '广州',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '三亚',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '武汉',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    }, {
                        // 导航名称
                        text: '合肥',
                        // 导航名称右上角徽标，2.5.6 版本开始支持
                        badge: 3,
                        // 是否在导航名称右上角显示小红点
                        dot: true,
                        // 导航节点额外类名
                        className: 'my-class',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识符
                                id: 1,
                                // 禁用选项
                                disabled: true,
                            },
                            {
                                text: '杭州',
                                id: 2,
                            },
                        ],
                    },],
            }
        },
        created() {
            this.activeData = this.items[this.active]
        },
        methods: {
            handleClickNav(idx) {
                let data = this.items[idx]
                this.activeData = data
            },
            onSearch(){
                if(!this.value)return this.$toast('请输入关键字')
                this.$router.push({
                    name:'search',
                    query:{
                        key:this.value
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .shop-type {
        flex: 1;
        display: flex;
        flex-direction: column;
        .body {
            flex: 1;
            display: flex;
            flex-direction: column;
            ::v-deep .van-tree-select {
                flex: 1;
            }
        }

    }
</style>
